<!--
 * @Author       : 梁嘉琳
 * @Date         : 2022-05-27 11:11:29
 * @LastEditors  : 梁嘉琳
 * @LastEditTime : 2022-05-27 15:24:45
 * @FilePath     : \aaa\examples\pressure.html
-->
<!DOCTYPE html>
<html lang="zh">
	<head>
		<title>threejs学习</title>
		<meta charset="utf-8" />
		<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0" />
		<link rel="icon" href="../favicon.ico" />
		<link type="text/css" rel="stylesheet" href="../public/main.css" />
	</head>
	<body>
		<canvas id="fireflx"></canvas>

		<script type="importmap">
			{
				"imports": {
					"three": "../node_modules/three/build/three.module.js",
					"three/": "../node_modules/three/",
					"public/": "../public/"
				}
			}
		</script>

		<script type="module">
			import * as THREE from 'three';
			import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls.js';
			import { resizeRendererToDisplaySize } from 'public/resizeHandle.js';
			import { Lut } from 'three/examples/jsm/math/Lut.js';

			const canvas = document.querySelector('#fireflx');
			//orthoCamera 正交相机
			//Perspective 透视相机
			let perpCamera, orthoCamera, renderer, lut;
			let mesh, sprite;
			let scene, uiScene, params;

			const h = window.innerHeight;
			const w = window.innerWidth;
			const k = w / h;

			init();
			function init() {
				scene = new THREE.Scene();
				scene.background = new THREE.Color(0xffffff);
				//颜色条
				lut = new Lut();
				perpCamera = new THREE.PerspectiveCamera(60, k, 1, 100);
				perpCamera.position.set(0, 0, 10);
				scene.add(perpCamera);

				mesh = new THREE.Mesh(
					undefined,
					new THREE.MeshLambertMaterial({ side: THREE.DoubleSide, color: 0xf5f5f5, vertexColors: true })
				);
				scene.add(mesh);
				loadModel();

				const pointLight = new THREE.PointLight(0xffffff, 1);
				perpCamera.add(pointLight);

				renderer = new THREE.WebGLRenderer({ canvas, antialias: true });
				renderer.autoClear = false;
				renderer.setSize(w, h);

				const controls = new OrbitControls(perpCamera, renderer.domElement);
				controls.addEventListener('change', render);
			}

			function loadModel() {
				const loader = new THREE.BufferGeometryLoader();
				loader.load('../module_files/pressure.json', (geometry) => {
					geometry.center();
					geometry.computeVertexNormals();
					const colors = [];

					for (let i = 0, n = geometry.attributes.position.count; i < n; ++i) {
						colors.push(1, 1, 1);
					}

					geometry.setAttribute('color', new THREE.Float32BufferAttribute(colors, 3));

					mesh.geometry = geometry;
					updateColors();

					render();
				});
			}
			function render() {
				renderer.clear();
				renderer.render(scene, perpCamera);
			}
			function updateColors() {
				lut.setColorMap('rainbow');

				lut.setMax(2000);
				lut.setMin(0);

				const geometry = mesh.geometry;
				const pressures = geometry.attributes.pressure;
				const colors = geometry.attributes.color;

				for (let i = 0; i < pressures.array.length; i++) {
					const colorValue = pressures.array[i];
					const color = lut.getColor(colorValue);

					if (color === undefined) {
						console.log('Unable to determine color for value:', colorValue);
					} else {
						colors.setXYZ(i, color.r, color.g, color.b);
					}
				}
			}
		</script>
	</body>
</html>
